import React from 'react';

const InstallationSection: React.FC = () => {
  return (
    <section className="py-16 bg-gray-800">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">如何安装</h2>
        
        <div className="max-w-3xl mx-auto">
          <div className="flex mb-10">
            <div className="flex-shrink-0 mr-6">
              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold">1</div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-2">访问Edge扩展商店</h3>
              <p className="text-gray-300">
                打开 Microsoft Edge 浏览器，访问 
                <a 
                  href="https://microsoftedge.microsoft.com/addons/detail/lgkemdinjnjaphnbkmmcnejbefeapkfd" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-blue-400 hover:underline"
                >
                  Edge扩展商店页面
                </a>
              </p>
            </div>
          </div>
          
          <div className="flex mb-10">
            <div className="flex-shrink-0 mr-6">
              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold">2</div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-2">安装扩展</h3>
              <p className="text-gray-300">
                点击&quot;获取&quot;按钮，确认安装Network Console插件
              </p>
            </div>
          </div>
          
          <div className="flex">
            <div className="flex-shrink-0 mr-6">
              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold">3</div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-2">开始使用</h3>
              <p className="text-gray-300">
                点击浏览器工具栏中的插件图标，或打开DevTools查看&quot;Network Console&quot;面板
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default InstallationSection;